<template>
  <el-dialog
    v-model="dialogFormVisible"
    append-to-body
    draggable
    :title="$t('formgen.importItem.excelImport')"
    width="600px"
  >
    <el-timeline size="large">
      <el-timeline-item
        size="large"
        hollow
      >
        <div>{{ $t("formgen.excelImport.setp1") }}</div>
        <div class="one-step">
          <el-button
            class="mt10"
            size="default"
            @click="handleDownloadExcelTemplate"
          >
            {{ $t("formgen.excelImport.downloadTemp") }}
          </el-button>
          <span class="desc-text ml10">{{ $t("formgen.excelImport.downloadTempDesc") }}</span>
        </div>
      </el-timeline-item>
      <el-timeline-item
        size="large"
        hollow
      >
        {{ $t("formgen.excelImport.setp2") }}
        <el-upload
          drag
          accept=".xlsx, .xls"
          :headers="getUploadHeader()"
          :on-success="handleSuccess"
          :action="uploadUrl"
          :data="getUploadData()"
          class="mt10"
        >
          <el-icon class="el-icon--upload"><ele-UploadFilled /></el-icon>
          <div class="el-upload__text">{{ $t("formgen.excelImport.uploadDesc") }}</div>
          <template #tip>
            <div class="el-upload__tip">
              <div>{{ $t("formgen.excelImport.uploadTip1") }}</div>
              <div>{{ $t("formgen.excelImport.uploadTip2") }}</div>
              <div>{{ $t("formgen.excelImport.uploadTip3") }}</div>
            </div>
          </template>
        </el-upload>
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { getUploadHeader } from "@/utils/uploadFile";
import { download } from "@/utils/tduck";
import { downloadFormImportTemplateRequest } from "@/api/project/form";
import { baseUrl } from "@/utils/auth";
import { useComponents } from "@/views/formgen/components/FormDesign/hooks/useComponents";
import { ElMessageBox } from "element-plus";

const dialogFormVisible = ref(false);

const uploadUrl = ref(baseUrl + "/form/item/importExcel");

const handleShow = () => {
  dialogFormVisible.value = true;
};

const props = defineProps({
  targetId: {
    type: [String, Number],
    default: ""
  },
  // 导入类型 1.表单 2.题库
  importType: {
    type: String,
    default: ""
  },
  // 普通表单 ORDINARY
  formType: {
    type: [String, Number],
    default: "ORDINARY"
  }
});

const emit = defineEmits(["success"]);

const handleSuccess = (res: any) => {
  if (res.code === 200) {
    dialogFormVisible.value = false;
    ElMessageBox.alert(res.data, " ", {
      dangerouslyUseHTMLString: true
    });
    emit("success");
  }
};

const { getAllComponents } = useComponents();

const getUploadData = () => {
  return {
    jsonSchema: JSON.stringify(getAllComponents(1).flatMap((item: any) => item.list)),
    targetId: props.targetId,
    importType: props.importType,
    formType: props.formType
  };
};

const handleDownloadExcelTemplate = async () => {
  const res = await downloadFormImportTemplateRequest(props.formType as string);
  download(res, "import-template.xls");
};
defineExpose({
  handleShow
});
</script>
<style scoped lang="scss">
.one-step {
  display: flex;
  align-items: center;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

:deep(.excel-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
</style>
